<template>
  <div class="user-card" @click="$emit('click')">
    <g-avatar :icon="data.headUrl" />
    <div class="user-card__content">
      <div class="user-card-name mb10 bold">
        {{ data.username || "用户9528" }}
      </div>
      <div class="col-77 l">昵称: {{ data.nickName }}</div>
    </div>
    <span v-if="isDetail" class="user-card__extra"
      >{{ text }}<van-icon name="arrow"
    /></span>
  </div>
</template>

<script>
import GAvatar from "@/components/GAvatar.vue";
import { Icon, Button } from "vant";
export default {
  components: {
    GAvatar,
    [Icon.name]: Icon,
    [Button.name]: Button
  },
  props: {
    data: {
      type: Object,
      required: true
    },
    isDetail: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: "个人信息"
    }
  }
};
</script>

<style lang="less">
.user-card {
  background-color: #ffffff;
  padding: 40px;
  display: flex;
  align-items: center;
  .g-avatar {
    flex-shrink: 0;
    margin-right: 20px;
  }
  &__content {
    flex: 1;
  }
  .van-icon {
    font-size: 40px;
    color: #cccccc;
  }

  &__extra {
    display: flex;
    align-items: center;
    font-size: 28px;
    color: @primary;
    .van-icon {
      color: inherit;
    }
  }
}
</style>
